<template>
	<view class="set-data-by-user">
		<!-- 用户  个人中心  设置 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">编辑</text>
			</view>
		</u-navbar>
		<view
			class="set-data-container w-750 b-box  bg-fa po-re"
			style="padding-top:20rpx;"
			:style="{ height: containerHeight }"
		>
			<u-cell-group :border="false" :customStyle="{ marginBottom: '54rpx', background: '#ffffff' }">
				<u-cell :arrow="false" clickable @click="SetAvatar">
					<view slot="title" style="height: 88rpx;" class="d-flex flex-r ali-i-c just-sw b-box">
						<text
							slot="title"
							class="pf-sc"
							style="font-size: 32rpx;font-weight: 400;color: rgba(0,0,0,0.9000)"
						>
							头像
						</text>

						<view class="d-flex flex-r ali-i-c just-e">
							<view slot="value">
								<image
									:src="'https://www.chejingjing.cn' + user.avatar"
									style="width: 72rpx;height: 72rpx;border-radius: 100rpx;overflow: hidden;"
								></image>
							</view>
							<image
								slot="right-icon"
								:src="require('../static/right.png')"
								:draggable="false"
								style="height: 26rpx;width: 14rpx;margin-left: 20rpx;"
								mode=""
							></image>
						</view>
					</view>
				</u-cell>

				<u-cell :arrow="false" clickable @click="SetName">
					<view slot="label" style="height: 88rpx;" class="d-flex flex-r ali-i-c just-sw b-box">
						<text
							slot="title"
							class="pf-sc"
							style="font-size: 32rpx;font-weight: 400;color: rgba(0,0,0,0.9000"
						>
							姓名
						</text>
						<view class="d-flex flex-r ali-i-c just-e">
							<text
								slot="value"
								class="pf-sc"
								style="font-size: 32rpx;font-weight: 400;color:#999999;"
							>
								{{ user.nickname }}
							</text>
							<image
								slot="right-icon"
								:src="require('../static/right.png')"
								:draggable="false"
								style="height: 26rpx;width: 14rpx;margin-left: 20rpx;"
								mode=""
							></image>
						</view>
					</view>
				</u-cell>
				<u-cell
					:arrow="false"
					clickable
					url="/pages/SetDelByUser/SetDelByUser?source=setPhoneNum"
					@click="SetPhone"
				>
					<view slot="label" style="height: 88rpx;" class="d-flex flex-r ali-i-c just-sw b-box">
						<text
							slot="title"
							class="pf-sc"
							style="font-size: 32rpx;font-weight: 400;color: rgba(0,0,0,0.9000);"
						>
							手机号
						</text>
						<view class="d-flex flex-r ali-i-c just-e">
							<text
								slot="value"
								class="pf-sc"
								style="font-size: 32rpx;font-weight: 400;color:#999999;"
							>
								{{ user.mobile ? user.mobile : '' }}
							</text>
						</view>
					</view>
				</u-cell>
			</u-cell-group>
			<view class="w-750 b-box  d-flex flex-r ali-i-c just-c">
				<u-button
					:throttleTime="700"
					@click="LogOutByUser"
					:customStyle="{
						height: '88rpx',
						width: '602rpx',
						font: '400 32rpx PingFang SC',
						color: '#ffffff',
						borderWidth: '0rpx',
						background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
						borderRadius: '44rpx'
					}"
					shape="square"
					text="退出登录"
				></u-button>
			</view>
		</view>
		<Contact-the-customer
			ref="customModel"
			:show="ModelShow"
			:top="'30rpx'"
			:confirmText="confirmText"
			:success="ModelStatus"
			:cancelText="cancelText"
			:height="height"
			:Cancelcolor="Cancelcolor"
			:color="color"
			:showCloseIcon="showCloseIcon"
			@cancel="ModelCancel"
			@confirm="ModelConfirm"
			@confirmPhone="confirmPhone"
			:title="ModelTitle"
		/>
	</view>
</template>

<script>
import { edituser, uploadimg } from '@/common/api.js';
import { login } from '@/utils/apis.js';
import { _containerHeight } from '@/utils/GetSys.js';
import uCell from '../components/uview-ui/components/u-cell/u-cell';
import uCellGroup from '../components/uview-ui/components/u-cell-group/u-cell-group';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
import ContactTheCustomer from '../components/Contact-the-customer/Contact-the-customer.vue';

export default {
	components: {
		'u-cell': uCell,
		'u-cell-group': uCellGroup,
		'u-navbar': Unavbar,
		'u-button': Ubutton,
		'Contact-the-customer': ContactTheCustomer
	},
	data() {
		return {
			containerHeight: '',
			ModelShow: false,
			ModelStatus: false, //客服
			ModelTitle: '',
			confirmText: '',
			cancelText: '',
			color: '',
			height: '',
			photo: '',
			image: '',
			showCloseIcon: '',
			Cancelcolor: '',
			user: uni.getStorageSync('userInfo'),
			userPhone: uni.getStorageSync('userPhone') //用于显示用户的手机号
		};
	},
	methods: {
		LogOutByUser() {
			uni.removeStorageSync('CurrentClient');
			uni.removeStorageSync('userCent');
			uni.clearStorage();
			uni.setStorageSync('showCenter',true)
			uni.reLaunch({
				url: '/pages/index/index'
			});
		},
		ModelCancel() {
			//关闭模态框
			this.ModelShow = false;
		},
		confirmPhone(phone) {
			console.log(phone);

			//确认修改
			//点击确认修改
			if (!uni.getStorageSync('usertoken')) {
				return uni.showToast({
					title: '请先授权登录',
					icon: 'none'
				});
			}
			if (phone === '') {
				return uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			}
			
			let regphone = /^1[3-8]\d{9}$/;
			if (!regphone.test(phone)) {
				uni.showToast({
					title: '请填写正确的手机号',
				});
				return;
			}
			if(this.userPhone==phone){
				return uni.showToast({
					title:'请不要输入相同的手机号',
					icon:'none'
				})
			}
			let params = {
				token: uni.getStorageSync('usertoken'),
				mobile: phone,
				avatar: uni.getStorageSync('userCent').avatar,
				nickname: this.user.nickname
			};
			edituser(params).then(res => {
			
				if (res.data.code === 1) {
					uni.setStorageSync('userPhone',phone)
					uni.switchTab({
						url:'/pages/UserCenter/UserCenter'
					});
				}
			});
		},
		ModelConfirm(input) {
			//确认修改
			// 点击确认修改
			if (!uni.getStorageSync('usertoken')) {
				return uni.showToast({
					title: '请先授权登录',
					icon: 'none'
				});
			}
			let params = {
				token: uni.getStorageSync('usertoken'),
				mobile: 13325728112,
				avatar: uni.getStorageSync('userCent').avatar,
				nickname: input
			};
			edituser(params).then(res => {
				if (res.data.code === 1) {
					uni.navigateBack({});
				}
			});
		},

		SetName() {
			//修改昵称
			this.ModelTitle = '输入姓名';
			this.confirmText = '确认';
			this.cancelText = '取消';
			this.Cancelcolor = '#999999';
			this.color = '#333333';
			this.height = '110rpx';
			this.showCloseIcon = false;
			this.ModelShow = true;
		},
		SetPhone() {
			//修改手机号
			this.ModelTitle = '输入手机号';
			this.confirmText = '确认';
			this.cancelText = '取消';
			this.Cancelcolor = '#999999';
			this.color = '#333333';
			this.height = '110rpx';
			this.showCloseIcon = false;
			this.ModelShow = true;
		},
		SetAvatar() {
			//修改头像
			uni.chooseImage({
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					const uploadTask = uni.uploadFile({
						url: 'https://www.chejingjing.cn/api/index/uploadimg',
						filePath: tempFilePaths[0],
						name: 'photo',
						formData: {
							photo: tempFilePaths[0]
						},
						success: res => {
							console.log(JSON.parse(res.data));
							res = JSON.parse(res.data);
							// console.log(res.code);
							if (res.code == 1) {
								console.log(res.data);
								let params = {
									token: uni.getStorageSync('usertoken'),
									mobile: 13325728112,
									avatar: res.data.url1,
									nickname: uni.getStorageSync('userCent').nickname
								};
								edituser(params).then(res => {
									if (res.data.code == 1) {
										uni.navigateBack({});
									}
								});
							}
						}
					});
				}
			});
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
	}
};
</script>

<style lang="scss">
.set-data-by-user {
}
</style>
